<template>
	<view>
		<view class="uni-list" style="margin-bottom: 32upx;">
			<block v-for="(item, index) in datas" :key="index">
                <list-good :data="item" :index="index" @tap="_clickListGood">
                </list-good>
            </block>
		</view>
        <text>slot演示</text>
		<view class="uni-list" style="margin-bottom: 32upx;">
			<block v-for="(item, index) in data2" :key="index">
                <list-good :data="item" :index="index" @tap="_clickListGood" @change="_changeListGood">
                    <view style="color: #007AFF;font-size: 20upx;">
                    	其他内容({{data.size}})
                    </view>
                    <template slot="numbox">
                    	{{data.size==-1?'到货提醒':data.size==-2?'抢购':data.size==-3?'停止销售':''}}
                    </template>
                </list-good>
            </block>
		</view>
        
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-form-item uni-column">
                <view class="title">切换排练方式</view>
                <radio-group name="radio" @change="_radio">
                    <label>
                        <radio value="column" />竖排
                    </label>
                    <label>
                        <radio value="row" checked />双列
                    </label>
                </radio-group>
            </view>
		</view>
		<view :class="[type == 'column' ? 'uni-list' : 'pageList__row--wrap']">
			<block v-for="(item, index) in data2" :key="index">
                <list-good :type="type" :data="item" :index="index" @tap="_clickListGood">
                    <template slot="numbox">
                    	{{data.size==-1?'到货提醒':data.size==-2?'抢购':data.size==-3?'停止销售':''}}
                    </template>
                </list-good>
            </block>
		</view>
	</view>
</template>

<script>
    import listGood from '@/components/wlp-list-good/wlp-list-good.vue';
    
	export default {
        components: {
            listGood
        },
		data() {
			return {
                type: 'row',
				datas: [
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                        imgUrl: '/static/temp/good.jpg',
                        sku: [{name:'330/g 每盒'},{name:'450/g 每盒'}],
                        label: '特惠',
                        price: '9.9',
                        originalPrice: '45',
                        size: 3
                    },
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                        imgUrl: '/static/temp/good.jpg',
                        sku: [{name:'300/g 每盒'}],
                        label: '特惠',
                        price: '9.9',
                        originalPrice: '45',
                        size: 1
                    },
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                        imgUrl: '/static/temp/good.jpg',
                        price: '9.9'
                    }
                ],
                data2: [
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        imgUrl: '/static/temp/good.jpg',
                        label: '特惠',
                        sku: [{name:'300/g 每盒'},{name:'300/g 每盒'}],
                        price: '9.9',
                        originalPrice: '45',
                        size: 3
                    },
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        imgUrl: '/static/temp/good.jpg',
                        label: '特惠',
                        sku: [{name:'300/g 每盒'}],
                        price: '9.9',
                        originalPrice: '45',
                        size: 1
                    },
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        imgUrl: '/static/temp/good.jpg',
                        sku: [{name:'300/g 每盒'}],
                        price: '9.9',
                        size: -1
                    },
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        imgUrl: '/static/temp/good.jpg',
                        price: '9.9',
                        size: -2
                    },
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        imgUrl: '/static/temp/good.jpg',
                        price: '9.9',
                        size: -3
                    },
                    {
                        title: '香水菠萝vvv香水菠萝香水菠萝香水菠萝s',
                        imgUrl: '/static/temp/good.jpg',
                        price: '9.9',
                    }
                ]
			};
		},
        methods: {
            _clickListGood(index, type){
                console.log(index+":"+type)
            },
            _changeListGood(value, index){
                this.data2[index].size = value;
            },
            _radio(e){
                this.type = e.detail.value;
            }
        }
	}
</script>

<style>
    .pageList__row--wrap{
        display: flex;
        flex-wrap: wrap;
        padding: 8upx;
    }
    
    .uni-form-item .title {
    	padding: 20upx 0;
    }
</style>
